<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header">
</head>
<link th:href="@{/ajax/libs/jquery-layout/jquery.layout-latest.css}" rel="stylesheet"/>
<link th:href="@{/ajax/libs/jquery-ztree/3.5/css/metro/zTreeStyle.css}" rel="stylesheet"/>
<script th:src="@{/js/views/bSecpannel.js}"></script>

<body class="gray-bg">
<div class="ui-layout-west">
    <div class="main-content">
        <div class="box box-main">
            <div class="box-header">
                <div class="box-title">
                    <i class="fa icon-grid"></i>安防分布
                </div>
                <div class="box-tools pull-right">
                    <button type="button" class="btn btn-box-tool" id="btnExpand" title="展开" style="display:none;"><i class="fa fa-chevron-up"></i></button>
                    <button type="button" class="btn btn-box-tool" id="btnCollapse" title="折叠"><i class="fa fa-chevron-down"></i></button>
                    <button type="button" class="btn btn-box-tool" id="btnRefresh" title="刷新部门"><i class="fa fa-refresh"></i></button>
                </div>
            </div>
            <div class="ui-layout-content">
                <div id="tree" class="ztree"></div>
            </div>
        </div>
    </div>
</div>
<div class="container-div ui-layout-center">
    <div class="col-xs-12 select-table table-striped">
        <div class="ibox float-e-margins">
            <div class="ibox-content">
                <h3>安防警报类型 </h3>
                <table id="bootstrap-table" data-mobile-responsive="true"></table>
            </div>
        </div>
    </div>
    <div class="wrapper wrapper-content">
        <div class="row">
            <h2>    环境数据警报</h2>
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>降雨量报警分布可视化(ml)</h5>
                        <div class="ibox-tools">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                <i class="fa fa-superpowers"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a onclick="init_rainsec()">原始数据</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="rainsec"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>湿度报警分布可视化(%)</h5>
                        <div class="ibox-tools">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                <i class="fa fa-superpowers"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a onclick="init_humsec()">原始数据</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="humsec"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>空气质量报警分布可视化(AQI)</h5>
                        <div class="ibox-tools">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                <i class="fa fa-superpowers"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a onclick="init_pmsec()">原始数据</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="pmsec"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>温度报警分布可视化(℃)</h5>
                        <div class="ibox-tools">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                <i class="fa fa-superpowers"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a onclick="init_tempsec()">原始数据</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="tempsec"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>水位报警分布可视化(mm)</h5>
                        <div class="ibox-tools">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                <i class="fa fa-superpowers"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a onclick="init_wlevelsec()">原始数据</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="wlvlsec"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <h2>水质数据警报</h2>
            <div class="col-sm-9">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>水质警报分布可视化（毒理）</h5>
                        <div class="ibox-tools">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                <i class="fa fa-superpowers"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a onclick="sort_3d_watersec()">排序数据</a>
                                </li>
                                <li><a onclick="init_3d_watersec()">原始数据</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="watersec" style="height: 400px;"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>水质警报分布可视化(细菌数量)</h5>
                        <div class="ibox-tools">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                <i class="fa fa-superpowers"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a onclick="init_bacsec()">原始数据</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="bacsec" style="height: 400px"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <h2>警报分类统计</h2>
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>环境警报类型分布可视化</h5>
                        <div class="ibox-tools">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                <i class="fa fa-superpowers"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a onclick="init_envsectype()">原始数据</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="envsectype"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>水质警报类型分布可视化</h5>
                        <div class="ibox-tools">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                <i class="fa fa-superpowers"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a onclick="init_watsectype()">原始数据</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="watsectype"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
<div th:include="include :: footer"></div>
<!--js-->
<script th:src="@{/js/plugins/simditor/module.js}"></script>
<script th:src="@{/ajax/libs/jquery-layout/jquery.layout-latest.js}"></script>
<!--echarts 可视化图形 插件-->
<script th:src="@{/js/plugins/echarts/echarts.min.js}"></script>
<script th:src="@{/js/plugins/echarts/echarts-gl.min.js}"></script>
<script th:src="@{/ajax/libs/jquery-ztree/3.5/js/jquery.ztree.all-3.5.js}"></script>
<script th:inline="javascript">
    $(function() {
        $('body').layout({ west__size: 185 });
        select();
        queryAreaTree();
    });
    //分页查询
    function select() {
        var options = {
            url: "/iot/secpannel/list",
            search: false,
            columns: [
                {
                    field: 'mid',
                    title: '序号',
                    visible: true
                },
                {
                    field: 'content',
                    title: '警报类型',
                    sortable: true
                },
                {
                    field: 'secnum',
                    title: '警报次数',
                    sortable: true
                },
                {
                    field: 'belong',
                    title: '所属部分',
                    sortable: true
                },
                {
                    field: 'alarm_value',
                    title: '预警值',
                    sortable: true
                },
            ]//警报类型的字段类型之前是text，不匹配，修改为varchar
        };
        $.table.init(options);
    };
    function queryAreaTree(){
        var url = ctx + "system/dept/treeData";
        var options = {
            url: url,
            onClick : zOnClick
        };
        $.tree.init(options);

        function zOnClick(event, treeId, treeNode) {
            aid1 = treeNode.id;
            $("#aid").val(treeNode.id);
            $.table.search();
        }
        $.tree.init(options);
    }
    $('#form-group11').on('change', function (e) {
        $("#form-group1").attr("name",$("#form-group11").val())
    });
    $('#form-group22').on('change', function (e) {
        $("#form-group2").attr("name",$("#form-group22").val())
    });
    $('#form-group33').on('select2:select', function (e) {
        $("#form-group3").attr("name",$("#form-group33").val())
    });
    $('#form-group44').on('change', function (e) {
        $("#form-group4").attr("value",$("#form-group44").val());
    });

</script>
</body>
</html>

<!--<!DOCTYPE html>-->
<!--<html lang="zh" xmlns:th="http://www.thymeleaf.org">-->
<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <title>安防面板</title>-->
<!--    <meta name="viewport" content="width=device-width, initial-scale=0.75">-->
<!--    &lt;!&ndash;360浏览器优先以webkit内核解析&ndash;&gt;-->
<!--    <link rel="shortcut icon" href="favicon.ico">-->
<!--    <link href="../../../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>-->
<!--    <link href="../../../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>-->
<!--    <link href="../../../static/css/main/animate.min.css" th:href="@{/css/main/animate.min.css}" rel="stylesheet"/>-->
<!--    <link href="../../../static/css/main/style.min862f.css" th:href="@{/css/main/style.min862f.css}" rel="stylesheet"/>-->
<!--    &lt;!&ndash; Morris &ndash;&gt;-->
<!--    <link href="../../../static/css/plugins/morris/morris-0.4.3.min.css"-->
<!--          th:href="@{/css/plugins/morris/morris-0.4.3.min.css}" rel="stylesheet">-->
<!--    &lt;!&ndash; Gritter &ndash;&gt;-->
<!--    <link href="../../../static/js/plugins/gritter/jquery.gritter.css"-->
<!--          th:href="@{/js/plugins/gritter/jquery.gritter.css}" rel="stylesheet">-->
<!--    &lt;!&ndash;js&ndash;&gt;-->
<!--    <script th:src="@{/js/views/bSecpannel.js}"></script>-->
<!--    &lt;!&ndash;echarts 可视化图形 插件&ndash;&gt;-->
<!--    <script th:src="@{/js/plugins/echarts/echarts.min.js}"></script>-->
<!--    <script th:src="@{/js/plugins/echarts/echarts-gl.min.js}"></script>-->
<!--    <script th:src="@{/js/jquery.min.js}"></script>-->
<!--    <script th:src="@{/js/bootstrap.min.js}"></script>-->
<!--    <script th:src="@{/ajax/libs/jquery-layout/jquery.layout-latest.js}"></script>-->
<!--    <script th:src="@{/ajax/libs/jquery-ztree/3.5/js/jquery.ztree.all-3.5.js}"></script>-->
<!--    <link th:href="@{/ajax/libs/jquery-layout/jquery.layout-latest.css}" rel="stylesheet"/>-->
<!--    <link th:href="@{/ajax/libs/jquery-ztree/3.5/css/metro/zTreeStyle.css}" rel="stylesheet"/>-->
<!--</head>-->
<!--<body class="gray-bg" onload="secload();select();$.table.search()">-->
<!--<div class="ui-layout-west">-->
<!--    <div class="main-content">-->
<!--        <div class="box box-main">-->
<!--            <div class="box-header">-->
<!--                <div class="box-title">-->
<!--                    <i class="fa icon-grid"></i> 安防终端分布-->
<!--                </div>-->
<!--                <div class="box-tools pull-right">-->
<!--                    <button type="button" class="btn btn-box-tool" id="btnExpand" title="展开" style="display:none;"><i class="fa fa-chevron-up"></i></button>-->
<!--                    <button type="button" class="btn btn-box-tool" id="btnCollapse" title="折叠"><i class="fa fa-chevron-down"></i></button>-->
<!--                    <button type="button" class="btn btn-box-tool" id="btnRefresh" title="刷新地址"><i class="fa fa-refresh"></i></button>-->
<!--                </div>-->
<!--            </div>-->
<!--            <div class="ui-layout-content">-->
<!--                <div id="tree" class="ztree"></div>-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->
<!--</div>-->

<!--&lt;!&ndash;<div class="col-xs-12 select-table table-striped">-->
<!--    <div class="ibox float-e-margins">-->
<!--        <div class="ibox-content">-->
<!--            <h5>降水量警报 </h5>-->
<!--            <table id="bootstrap-table" data-mobile-responsive="true"></table>-->
<!--        </div>-->
<!--    </div>-->
<!--</div>-->
<!--</div>&ndash;&gt;-->
<!--</div>-->
<!--</div>-->
<!--<div th:include="include :: footer"></div>-->
<!--<script th:src="@{/ajax/libs/jquery-layout/jquery.layout-latest.js}"></script>-->
<!--<script th:src="@{/ajax/libs/jquery-ztree/3.5/js/jquery.ztree.all-3.5.js}"></script>-->
<!--<script th:inline="javascript">-->
<!--    -->
<!--</script>-->
<!--&lt;!&ndash;<script th:inline="javascript">-->
<!--    //分页查询-->
<!--    function select() {-->
<!--        var options = {-->
<!--            url: "/iot/secpannel/rain",-->
<!--            search: false,-->
<!--            columns: [-->
<!--                {-->
<!--                    field: 'rain',-->
<!--                    title: '降水量',-->
<!--                    visible: true-->
<!--                },-->
<!--                {-->
<!--                    field: 'time',-->
<!--                    title: '时间',-->
<!--                    sortable: true-->
<!--                },-->
<!--                {-->
<!--                    field: 'content',-->
<!--                    title: '警报类型',-->
<!--                    sortable: true-->
<!--                }-->
<!--            ]//警报类型的字段类型之前是text，不匹配，修改为varchar-->
<!--        };-->
<!--        $.table.init(options);-->
<!--    }-->
<!--</script>&ndash;&gt;-->
<!--&lt;!&ndash;jquery图表float插件&ndash;&gt;-->
<!--<script th:src="@{/js/plugins/flot/jquery.flot.js}"></script>-->
<!--<script th:src="@{/js/plugins/flot/jquery.flot.tooltip.min.js}"></script>-->
<!--<script th:src="@{/js/plugins/flot/jquery.flot.spline.js}"></script>-->
<!--<script th:src="@{/js/plugins/flot/jquery.flot.resize.js}"></script>-->
<!--<script th:src="@{/js/plugins/flot/jquery.flot.pie.js}"></script>-->
<!--<script th:src="@{/js/plugins/flot/jquery.flot.symbol.js}"></script>-->
<!--&lt;!&ndash;jquery图表peity插件&ndash;&gt;-->
<!--<script th:src="@{/js/plugins/peity/jquery.peity.min.js}"></script>-->
<!--<script th:src="@{/js/demo/peity-demo.min.js}"></script>-->
<!--<script th:src="@{/js/content.min.js}"></script>-->
<!--&lt;!&ndash;jquery交互UI插件&ndash;&gt;-->
<!--<script th:src="@{/js/plugins/jquery-ui/jquery-ui.min.js}"></script>-->
<!--&lt;!&ndash;jquery地图插件&ndash;&gt;-->
<!--<script th:src="@{/js/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js}"></script>-->
<!--<script th:src="@{/js/plugins/jvectormap/jquery-jvectormap-world-mill-en.js}"></script>-->
<!--&lt;!&ndash;饼图数据统计插件&ndash;&gt;-->
<!--<script th:src="@{/js/plugins/easypiechart/jquery.easypiechart.js}"></script>-->
<!--&lt;!&ndash;小体积高密度图表插件&ndash;&gt;-->
<!--<script th:src="@{/js/plugins/sparkline/jquery.sparkline.min.js}"></script>-->
<!--<script th:src="@{/js/demo/sparkline-demo.min.js}"></script>-->
<!--&lt;!&ndash;sparkline图表插件&ndash;&gt;-->
<!--<script th:src="@{/js/plugins/sparkline/jquery.sparkline.min.js}"></script>-->
<!--<script th:src="@{/js/demo/sparkline-demo.min.js}"></script>-->
<!--</body>-->
<!--</html>-->